<template>
    <title-box title="基本信息">
        <div class="x-content-inner">
            <!-- 基本信息 -->
            <ul class="x-basic-info">
                <li>
                    <span>电站名称</span>
                    <p>{{ basic.name }}</p>
                </li>
                <li>
                    <span>电站类型</span>
                    <p>{{ typeName }}</p>
                </li>
                <li>
                    <span>电站地址</span>
                    <p>{{ basic.address }}</p>
                </li>
                <li>
                    <span>住户姓名</span>
                    <p>{{ basic.houseName }}</p>
                </li>
                <li>
                    <span>住户电话</span>
                    <p>{{ basic.houseTelphone }}</p>
                </li>
            </ul>
        </div>
    </title-box>
</template>
<script setup>
import { ref, reactive, computed, watch } from 'vue'
import TitleBox from '/@/components/TitleBox/index.vue'
import { getById } from '/@/api/Inverter/Station/index.js'
import { list } from '/@/api/Inverter/StationType/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
import { clone } from '@iframe/tools/utils/Tools'

const props = defineProps({
    stationId: {
        type: Number
    }
})

const types = ref([])
const basic = reactive({})

const typeName = computed(() => {
    const type = types.value.find(item => basic.inverterStationTypeId === item.id)
    return type ? type.name : '--'
})

const onQuery = () => {
    if (props.stationId) {
        getById(props.stationId).then(result => {
            if (result.code === SUCCESS_CODE) {
                clone(basic, result.data)
            }
        })
    }
}

const onList = () => {
    list().then(result => {
        if (result.code === SUCCESS_CODE) {
            types.value = result.data
        }
    })
}

watch(
    () => props.stationId,
    () => {
        onQuery()
    }
)

onQuery()
onList()
</script>
